<template>
	<view class="bg">
		<view class="head-type">
			<image :src="imageSrc" mode="aspectFill" class="circle"></image>
			<text style="font-weight: bold;">{{app_details.user_name}}</text><text>的学业成绩材料申请</text>
			<button class="mini-btn" :type="btnType" plain="true" size="mini">{{app_res.status}}</button>
		</view>
		<view class="app_detail">
			<view style="height: 28rpx;"></view>
			<view class="row">
				<uni-row>
					<uni-col :offset="1" :span="6">
						<view class="col1">审批编号</view>
					</uni-col>
					<uni-col :offset="2" :span="6">
						<view class="col1">{{app_details.id}}</view>
					</uni-col>
				</uni-row>
			</view>
			<view class="row">
				<uni-row>
					<uni-col :offset="1" :span="6">
						<view class="col1">提交时间</view>
					</uni-col>
					<uni-col :offset="2" :span="10">
						<view class="col1">{{transferTime(app_details.time)}}</view>
					</uni-col>
				</uni-row>
			</view>
			<view class="row">
				<uni-row>
					<uni-col :offset="1" :span="6">
						<view class="col1">学号</view>
					</uni-col>
					<uni-col :offset="2" :span="4">
						<view class="col1">{{app_details.user_id}}</view>
					</uni-col>
				</uni-row>
			</view>
			<view class="row">
				<uni-row>
					<uni-col :offset="1" :span="6">
						<view class="col1">所属院系</view>
					</uni-col>
					<uni-col :offset="2" :span="4">
						<view class="col1">{{app_details.fac}}</view>
					</uni-col>
				</uni-row>
			</view>
			<view class="row">
				<uni-row>
					<uni-col :offset="1" :span="6">
						<view class="col1">专业</view>
					</uni-col>
					<uni-col :offset="2" :span="8">
						<view class="col1">{{app_details.major}}</view>
					</uni-col>
				</uni-row>
			</view>
			<view class="row">
				<uni-row>
					<uni-col :offset="1" :span="6">
						<view class="col1">项目</view>
					</uni-col>
					<uni-col :offset="2" :span="4">
						<view class="col1">{{app_details.project}}</view>
					</uni-col>
				</uni-row>
			</view>
			<view class="row">
				<uni-row>
					<uni-col :offset="1" :span="6">
						<view class="col1">材料表格</view>
					</uni-col>
					<uni-col :offset="2" :span="4">
						<navigator class="col1">{{app_details.tab_materials}}</navigator>
					</uni-col>
				</uni-row>
			</view>
			<view class="row">
				<uni-row>
					<uni-col :offset="1" :span="6">
						<view class="col1">系统赋分</view>
					</uni-col>
					<uni-col :offset="2" :span="6">
						<view class="col1">学分：{{app_details.user_credits}}</view>
					</uni-col>
					<uni-col :offset="2" :span="6">
						<view class="col1">均绩：{{app_details.user_gpa}}</view>
					</uni-col>
				</uni-row>
			</view>

		</view>
		<view class="head-type">
			<image :src='imageSrc' mode="aspectFill" class="circle"></image>
			<text>审批结果</text>
		</view>
		<view class="app_res">
			<view class="res-title">
				<image class="res-title-image" src="/static/teacher.png" mode="aspectFill"></image>
				<view>审批人 · {{app_res.status}}</view>
			</view>
			<view class="res-desc">
				<view class="res-desc-left">
					<image class="res-desc-image" :src="app_res.teacher_avatar" mode="aspectFill"></image>
					<view>{{app_res.teacher}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageSrc: '',
				btnType: "",
				apply_id:0,
				app_details: {
					id: 0,
					time: "",
					fac: "",
					major: "",
					project: "学业成绩",
					user_id: uni.getStorageSync("user_id"),
					user_credits: 0,
					user_gpa: 0,
					tab_materials: "",
					user_name: ''
				},
				app_res: {
					teacher: "",
					teacher_avatar: "https://tse1-mm.cn.bing.net/th/id/OIP-C.LgNuPvrrT5QjxAOcUSfyJAAAAA?rs=1&pid=ImgDetMain",
					status: "",
					status_wpf: ""
				},
			}
		},
		onLoad(option) {
					console.log(option.apply_id);
					this.apply_id=option.apply_id;
				},
		onShow() {
			const API_BASE_URL = this.$ProjectConfig.API_BASE_URL;
			const that = this;
			//发起网络请求
			wx.request({
				url: API_BASE_URL + '/apply/getStudyApplyInfo',
				header: {
					'Content-Type': 'application/json',
				},
				data: {
					user_id: uni.getStorageSync("user_id"),
					apply_id:this.apply_id
				},
				method: 'GET',
				success: function(res) {
					console.log(res);
					that.app_details.time = res.data.apply_time;
					that.app_details.id = res.data.apply_id;
					that.app_res.teacher = res.data.apply_manager;
					that.app_res.status = res.data.apply_status;
					that.app_details.tab_materials = res.data.apply_title;
					that.app_details.user_credits = res.data.user_credits;
					that.app_details.user_gpa = res.data.user_gpa;
					that.app_res.status_wpf = res.data.apply_status_wpf;
					if (that.app_res.status_wpf == "p") {
						that.imageSrc = '/static/pass.png';
						that.btnType = 'primary';
					} else {
						that.imageSrc = '/static/fail.png';
						that.btnType = 'warn';
					}
				}
			});
			wx.request({
				url: API_BASE_URL + '/user/userInfo',
				header: {
					'Content-Type': 'application/json',
				},
				data: {
					user_id: uni.getStorageSync("user_id")
				},
				method: 'GET',
				success: function(res) {
					console.log(res);
					that.app_details.user_name = res.data.name;
					that.app_details.fac = res.data.faculty;
					that.app_details.major = res.data.major;
				}
			});
		},
		computed: {
			goTo: function() {
				return function(url) {
					uni.navigateTo({
						url: url
					})
				}
			},
			transferTime: function() {
				return function(str) {
					var arr=str.split(" ");
					var monthTable=[
						"Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"
					]
					var day=arr[1];
					var month=monthTable.indexOf(arr[2])+1;
					var year=arr[3];
					var time=arr[4];
					return year+"-"+month+"-"+day+" "+time;
				}
			},
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.bg {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.head-type {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 60rpx;
		width: 100%;
		padding: 10rpx 0 0 10rpx;
		font-size: 30rpx;

		.circle {
			height: 40rpx;
			width: 40rpx;
		}

	}

	.app_detail {
		width: 95%;
		margin: 20rpx 0;
		border-radius: 10rpx;
		box-shadow: 0 5rpx 6rpx 2rpx #cdcfcf;

		.row {
			margin: 10rpx;
			line-height: 2;
			font-size: 28rpx;
		}
	}

	.app_res {
		width: 95%;
		margin: 20rpx 0;
		border-radius: 10rpx;
		box-shadow: 0 5rpx 6rpx 2rpx #cdcfcf;

		.res-title {
			display: flex;
			flex-direction: row;
			align-items: center;
			font-size: 28rpx;
			padding: 20rpx 0 10rpx 20rpx;

			.res-title-image {
				height: 30rpx;
				width: 30rpx;
				margin-right: 20rpx;
			}
		}

		.res-desc {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			font-size: 26rpx;

			height: 100rpx;
			padding: 0 10rpx 20rpx 50rpx;

			.res-desc-left {
				display: flex;
				flex-direction: row;
				align-items: center;

				.res-desc-image {
					height: 60rpx;
					width: 60rpx;
					border: 1px solid #ccc;
					border-radius: 30rpx;
					margin-right: 30rpx;
				}
			}


		}

	}
</style>